<template>
  <view>
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="注册页面"
      left-icon="jiantou2"
      background-color="#007BC3"
    ></uni-nav-bar>
    <view :style="style"></view>
    <!-- <view class="grace-padding">132</view> -->
    <view class="grace-padding">
      <form @submit="formSubmit">
        <view class="input-item">
          <view class="grace-label">手机号:</view>
          <view class="input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" name="phonenumber" placeholder="请输入手机号码">
          </view>
        </view>
        <view class="input-item">
          <view class="grace-label">验证码:</view>
          <view class="getcode input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" name="yzm" placeholder="请输入短信验证码">
            <button class="sendmsg-btn" @tap="getVCode">{{vcodeBtnName}}</button>
          </view>
        </view>
        <view class="input-item">
          <view class="grace-label">输入密码:</view>
          <view class="getcode input" style="paading:0;">
            <input  placeholder-style="color:#A8A8A7" type="text" v-model="password" name="password" placeholder="请输入8-16位登录密码">
          </view>
        </view>
        <view class="input-item">
          <view class="grace-label">确认密码:</view>
          <view class="getcode input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" v-model="password2" placeholder="请确认登录密码">
          </view>
        </view>
        <view class="input-item">
          <view class="grace-label">姓名:</view>
          <view class="getcode input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" name="userName" placeholder="请输入真实姓名">
          </view>
        </view>
        <button
          form-type="submit"
          class="btn"
          type="primary"
          style="background:#007BC3; margin-top:30px;"
        >确认注册</button>
      </form>
    </view>
  </view>
</template>

<script>
import URL from "@/api/serverApi";
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components/uni-icon";
import { post } from "@/util/request";
var graceChecker = require("../../graceUI/graceChecker.js");

export default {
  data() {
    return {
      vcodeBtnName: "获取验证码",
      countNum: 120,
      countDownTimer: null,
      password: "",
      password2: ""
    };
  },
  computed: {
    //获取状态栏高度
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 44}px`;
    }
  },
  components: {
    uniNavBar,
    uniIcon
  },
  methods: {
    // 表单验证
    async formSubmit(e) {
      // 表单验证
      var rule = [
        {
          name: "phonenumber",
          checkType: "phoneno",
          errorMsg: "请填写正确的手机号"
        },
        {
          name: "yzm",
          checkType: "string",
          checkRule: "4,6",
          errorMsg: "请正确填写短信验证码"
        },
        {
          name: "userName",
          checkType: "string",
          checkRule: "1,3",
          errorMsg: "名字应为1到3个字符"
        },
        {
          name: "password",
          checkType: "string",
          checkRule: "6",
          errorMsg: "密码必须大于6位数"
        },
        {
          name: "",
          checkType: "psw",
          checkRule: "",
          errorMsg: "密码不一样"
        }
      ];
      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);
      //  console.log(132);

      // 验证通过
      console.log(this.password);
      console.log(this.password2);

      if (this.password !== this.password2) {
        console.log(132);
        uni.showToast({ title: "俩次密码不同" });
        // return;
      }
      if (checkRes) {
        console.log(this.password);

        uni.showToast({ title: "成功,在打印中查看", icon: "none" });
        console.log(JSON.stringify(e.detail.value));

        // let data = e.detail.value;
        var data = JSON.stringify(e.detail.value);

        // uni.request({
        //   url: "http://localhost:3000/user/register",
        //   method: "POST",
        //   data,
        //   success: res => {
        //     // console.log(JSON.stringify(res));
        //     console.log(res);
        //     this.news = res.data;
        //     uni.hideLoading();
        //   },
        //   fail: () => {
        //     console.log("错误");
        //   },
        //   complete: () => {
        //     console.log("为啥错误");
        //   }
        // });

        // return;
        let res = await post(URL.registerUser, data);
        console.log(res);
        if (res.code == 200) {
          uni.showToast({ title: "注册成功", icon: "success" });
          uni.navigateTo({
            url: "./Login"
          });
        } else {
          uni.showToast({
            title: "服务器错误,请查看node端",
            icon: "loading"
          });
        }
        // uni.request({
        //   url: URL.registerUser,
        //   data,
        //   method: "post",
        //   success: res => {
        //     console.log(res);
        //     console.log(res.data);
        //     // this.text = "request success";
        //   }
        // });
      } else {
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    },
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    getVCode: function() {
      // vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
      if (
        this.vcodeBtnName != "获取验证码" &&
        this.vcodeBtnName != "重新发送"
      ) {
        return;
      }
      this.vcodeBtnName = "发送中...";
      // 与后端 api 交互，发送验证码

      // uni.request({
      //   url: "https://open.ucpaas.com/ol/sms/sendsms", //仅为示例，并非真实接口地址。
      //   data: {
      //     sid: "f0e5bac25fdabe24c2efa5d77a05e239",
      //     token: "cb001677a3bbe9fdc46370498db9faa9",
      //     appid: "247867e6fe4e43fba01b7912af6dc264",
      //     templateid: "425207",
      //     mobile: "13395080827",
      //     param: "1"
      //   },
      //   method: "post",
      //   success: res => {
      //     console.log(res);
      //     console.log(res.data);
      //     // this.text = "request success";
      //   }
      // });

      // 假设发送成功，给用户提示
      uni.showToast({ title: "短信已发送，请注意查收", icon: "none" });
      // 倒计时
      this.countNum = 120;
      this.countDownTimer = setInterval(
        function() {
          this.countDown();
        }.bind(this),
        1000
      );
    },
    countDown: function() {
      if (this.countNum < 1) {
        clearInterval(this.countDownTimer);
        this.vcodeBtnName = "重新发送";
        return;
      }
      this.countNum--;
      this.vcodeBtnName = this.countNum + "秒重发";
    }
  }
};
</script>

<style lang="scss" scoped>
.grace-padding {
  padding: 6%;
  width: 88%;
  //   background: red;
}
.input-item {
  display: flex;
  // padding: 70upx 0 70upx 0;
  padding-top: 75upx;
  width: 100%;
  font-size: 32upx;
  // justify-content: space-around;
  input {
    font-size: 33upx;
    color: #a8a8a7;
  }
  .getcode {
    display: flex;
  }
  .input {
    border-bottom: 1px solid #c1c0bf;
    flex: 3;
  }
  .grace-label {
    font-size: 33upx;
    flex: 1;
  }
}
.btn {
  height: 66upx;
  line-height: 66upx;
  font-size: 33upx;
  margin-top: 60upx;
}
.sendmsg-btn {
  width: 163upx;
  height: 45upx;
  line-height: 45upx;
  background: #0089e1;
  color: #fff;
  font-size: 24upx;
  padding: 0;
}
</style>